/**
 * @name LineChartTwo
 * @desc 顺滑-折线图
 */
import React, { Component } from "react"
import echarts from "echarts/lib/echarts"
// 引入折线图
import "echarts/lib/chart/line"
// 引入提示框和标题组件
import "echarts/lib/component/tooltip"
import "echarts/lib/component/title"
import "echarts/lib/component/legend"

class LineChartTwo extends Component {
  state = { buffer1: [], buffer2: [], froms: [], nowId: "" }

  myChart = null
  componentDidMount() {
    this.init()
  }

  componentDidUpdate() {
    const { buffer1 = [], buffer2 = [], froms = [], nowId } = this.state

    const { data01 = [], data02 = [], list = [], ids } = this.props

    const _buffer1 = JSON.stringify(buffer1)
    const _buffer2 = JSON.stringify(buffer2)
    const _data1 = JSON.stringify(data01)
    const _data2 = JSON.stringify(data02)
    const _froms = JSON.stringify(froms)
    const _list = JSON.stringify(list)
    if (nowId !== ids) {
      this.init()
      this.setState({ buffer1: data01, buffer2: data02, froms: list, nowId: ids })
    }
  }

  init = () => {
    const { ids } = this.props
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById(ids))
    this.updateData()
    // 绘制图表
    this.myChart.resize()
  }
  updateData = () => {
    const { data01 = [], data02 = [], list = [] } = this.props
    this.myChart.setOption({
      tooltip: {
        trigger: "axis"
        // formatter: '{b} : {c}%',
      },
      color: ["#FF7800", "#98B1DE"],
      legend: {
        data: ["个人(分数)", "班级(平均分)"],
        icon: "rectangle",
        selectedMode: false //取消图例上的点击事件
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          // 坐标轴 轴线
          axisLine: {
            show: false,
            lineStyle: {
              color: "#666",
              fontSize: 12
            }
          },
          // 坐标轴 刻度
          axisTick: {
            show: false
          },
          type: "category",
          boundaryGap: false,
          splitLine: {
            //网格线
            show: true,
            lineStyle: {
              color: "#e2e2e2"
            }
          },
          data: list
        }
      ],
      yAxis: [
        {
          type: "value",
          /**坐标字体颜色 */
          axisLine: {
            show: false,
            onZero: true,
            lineStyle: {
              color: "#666"
            }
          },
          // 坐标轴 刻度
          axisTick: {
            show: false
          },
          splitLine: {
            //网格线
            show: true,
            lineStyle: {
              color: "#e2e2e2"
            }
          },
          /**纵坐标字体 */
          axisLabel: {
            formatter: "{value}"
          }
        }
      ],
      series: [
        {
          name: "个人(分数)",
          data: data01,
          stack: "",
          /**类型 */
          type: "line",
          /**折线顺滑 */
          smooth: true
        },
        {
          name: "班级(平均分)",
          data: data02,
          stack: "",
          /**类型 */
          type: "line",
          /**折线顺滑 */
          smooth: true
        }
      ]
    })
  }
  render() {
    const { ids } = this.props
    return <div id={ids} style={{ position: "relative", width: "100%", height: "100%" }}></div>
  }
}
export default LineChartTwo
